<template>
  <div class="home-page">
    <!-- 顶部导航栏 -->
    <el-header class="navbar">
      <div class="nav-container">
        <!-- Logo -->
        <div class="logo">
          <img src="@/assets/logo.png" alt="" style="cursor: pointer;">
        </div>
        <!-- 导航菜单 -->
        <el-menu mode="horizontal" :default-active="activeMenu" class="nav-menu">
          <el-menu-item index="home" @click="changePage('HomeIndex')">首页</el-menu-item>
          <el-menu-item index="read" @click="changePage('ReadIndex')">阅读</el-menu-item>
          <el-menu-item index="test" @click="changePage('Test')">测试</el-menu-item>
          <el-menu-item index="counseling" @click="changePage('CouncelorIndex')">心理咨询</el-menu-item>
        </el-menu>

        <!-- 搜索框 -->
        <div class="search-box">
          <el-input v-model="searchKeyword" placeholder="搜索文章或咨询师" @keyup.enter="handleSearch">
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </div>

        <div v-if="!userInfo">
          <span class="login-prompt" @click="changePage('Login')">去登录</span>
        </div>
        <!-- 右侧用户操作 -->
        <div class="user-actions" v-else>
          <!-- 消息通知 -->
          <el-badge :value="unreadMessages" class="message-icon">
            <el-icon><Bell /></el-icon>
          </el-badge>
          <span class="user-avatar">
              <el-avatar :size="40" :src="proxy.globalInfo.imageUrl+userInfo.avatar"></el-avatar>
          </span>
          <!-- 用户头像 -->
          <el-dropdown style="padding-left: 4px;" trigger="click">
            <span>你好<a href="javascript:void(0)" class="a-link">{{userInfo.nickName}}</a></span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item></el-dropdown-item>
                <el-dropdown-item @click="changePage('UserHome')">个人主页</el-dropdown-item>
                <el-dropdown-item v-if="userInfo.roletype!=0" @click="changePage('AdminLayout')">管理中心</el-dropdown-item>
                <el-dropdown-item @click="logout">退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </el-header>

    <el-main class="right-main" ><router-view :key="$route.fullPath"></router-view></el-main>

    <!-- 底部信息 -->
    <el-footer class="custom-footer" style="width: 100%;">
      <p>朋辈心理互助网站，致力于为用户提供温暖的支持</p>
      <p>联系我们: support@peerhelp.com</p>
    </el-footer>
  </div>
</template>

<script setup>
import { useRouter,useRoute } from 'vue-router';
import { Search, Bell } from '@element-plus/icons-vue';

import { ref,watch ,reactive,onMounted, getCurrentInstance, nextTick } from "vue";

const { proxy } = getCurrentInstance();

const api = {
  getUserInfo: "/getUserInfo",
  logout: "/logout",
};

  const activeMenu=ref("home");

  const route=useRoute();
  // 监听路由变化更新激活菜单
  watch(
    () => route.path,
    (newPath) => {
      // 将路由路径映射到菜单项的 index
      if (newPath.includes('/home')) {
        activeMenu.value = 'home';
      } else if (newPath.includes('/read')) {
        activeMenu.value = 'read';
      }else if (newPath.includes('/councelor')) {
        activeMenu.value = 'counseling';
      } else if (newPath.includes('/test')) {
        activeMenu.value = 'test';
      } else {
        activeMenu.value = ''; // 默认值
      }
    },
    { immediate: true } // 立即执行一次，初始化 activeMenu
  );


  // 初始化 activeMenu
onMounted(() => {
  const currentPath = route.path;
  if (currentPath.includes('/home')) {
    activeMenu.value = 'home';
  } else if (currentPath.includes('/read')) {
    activeMenu.value = 'read';
  } else if (currentPath.includes('/test')) {
    activeMenu.value = 'test';
  } else if (currentPath.includes('/councelor')) {
    activeMenu.value = 'counseling';
  }  else if (currentPath.includes('/test')) {
        activeMenu.value = 'test';
      } else {
    activeMenu.value = '';
  }
});


// 路由跳转
const router = useRouter();
const goToRead = () => router.push('/read');
const goToCategory = (categoryId) => router.push(`/read?category=${categoryId}`);
// 跳转页面
const changePage=(name)=>{
  router.push(
    {
      name:name,
      params:{
        curDate:new Date(),
      },
    }
  );
}

//退出
const logout = () => {
  proxy.Confirm(`你确定要退出吗?`, async () => {
    let result = await proxy.Request({
      url: api.logout,
    });
    if (!result) {
      return;
    }
    proxy.VueCookies.remove("userInfo");
    proxy.Message.success("退出成功");
    // 强制刷新页面
    setTimeout(()=>{
          window.location.href="/psychology/home";
        },1000);
    changePage("HomeIndex");
  });
};

const userInfo = ref(proxy.VueCookies.get("userInfo")||null)


// 搜索功能
const searchKeyword = ref('');
const handleSearch = () => {
  if (searchKeyword.value) {
    router.push(`/search?q=${searchKeyword.value}`);
  }
};

// 用户信息
const user = ref({
  avatar: 'https://via.placeholder.com/150',
});

// 未读消息数量
const unreadMessages = ref(3);


</script>

<style scoped>
.home-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;

}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgb(255, 255, 255);
  color: black;
  z-index: 1000;
  padding: 0 10%;
}

.nav-container {
  width: 96%;
  margin-left: 2%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

.nav-menu {
  flex: 1;
  justify-content: center;
}

.search-box {
  width: 200px;
  margin: 0 20px;
}

.user-actions {
  display: flex;
  align-items: center;
}

.message-icon {
  margin-right: 20px;
  cursor: pointer;
}
.right-main {
      position: relative;
      background: #fff;
      padding-top: 60px
    }

.login-prompt {
  font-size: 14px; /* 设置字体大小 */
  color: #409eff; /* 使用蓝色作为链接颜色 */
  cursor: pointer; /* 鼠标悬停时显示为手型 */
  text-decoration: underline; /* 添加下划线，模拟链接效果 */
}

.login-prompt:hover {
  color: #66b1ff; /* 鼠标悬停时改变颜色 */
}
/* 自定义 footer 样式 */
.custom-footer {
  background-color: #2c3e50; /* 背景颜色 */
  color: white; /* 文字颜色 */
  text-align: center; /* 文本居中对齐 */
  padding: 10px 0; /* 垂直方向上10px的内边距，水平方向上0 */
  font-size: 14px; /* 字体大小 */
  position: relative;
  bottom: 0; /* 确保页脚位于页面最底部 */
}

.custom-footer p {
  margin: 5px 0; /* 每个段落之间的间距 */
  line-height: 1.5; /* 行高设置 */
}

/* 可选：如果你希望链接有不同的颜色 */
.custom-footer a {
  color: #3498db; /* 链接颜色 */
  text-decoration: none; /* 移除下划线 */
}

.custom-footer a:hover {
  text-decoration: underline; /* 鼠标悬停时显示下划线 */
}
</style>